<template>
  <div class="bg-f2">
    <div class="bg-f2 bg-fff" v-loading="loading">
      <div class="tips">机房动力环境报警设置 <span class="alarmGrade" @click="dialogVisible = true">报警等级说明</span></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px">
        <el-row :gutter="20">
          <el-col :span="4" align="right"><div class="title">水浸</div></el-col>
          <el-col :span="8">
            <div class="">
              <el-form-item label="水浸报警：" prop="timeDate" class="mb_0">
                <el-radio-group v-model="ruleForm.flooding.valueOne">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="lineHeight_20">
                <span>开启后，机房水浸异常将会产生报警及时通知相关人员</span>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="btnSizeStyle" :loading="flooding_disable" size="medium" @click="submitBtn('flooding', 1)" v-preventReClick>保存</el-button>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12" align="left">
            <div class="">
              <el-form-item label="水浸报警等级：" :prop="'flooding.alarmGrade'" class="mb_8">
                <el-select v-model="ruleForm.flooding.alarmGrade" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <!-- 占位 -->
              <el-form-item class="lineHeight_20">
                <span></span>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4" align="right"><div class="title">UPS报警设置</div></el-col>
          <el-col :span="8">
            <div class="">
              <el-form-item label="UPS报警：" prop="timeDate" class="mb_0">
                <el-radio-group v-model="ruleForm.ups.valueOne">
                  <el-radio :label="1">开启</el-radio>
                  <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="lineHeight_20">
                <span>开启后，机房UPS异常将会产生报警及时通知相关人员</span>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="btnSizeStyle" :loading="ups_disable" size="medium" @click="submitBtn('ups', 2)" v-preventReClick>保存</el-button>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12" align="left">
            <div class="">
              <el-form-item label="UPS报警等级：" :prop="'ups.alarmGrade'" class="mb_8">
                <el-select v-model="ruleForm.ups.alarmGrade" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <!-- 占位 -->
              <el-form-item class="lineHeight_20">
                <span></span>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4" align="right"><div class="title">温湿度报警设置</div></el-col>
          <el-col :span="8">
            <div>
              <el-form-item label="机房温度:" :prop="'humidity.valueOne'" class="mb_8">
                <!-- 温度 0-50 -->
                <!-- @change="handleChange"  -->
                <el-input-number class="w100 input_num" v-model="ruleForm.humidity.valueOne" :precision="1" :min="0" :max="50" :controls="false"> </el-input-number>
                <span class="append">℃</span>
                <span style="padding: 0 10px">-</span>
                <el-form-item label="" :prop="'humidity' + '.valueTwo'" :rules="rules.humidity.valueTwo" class="inline">
                  <el-input-number class="w100 input_num" v-model="ruleForm.humidity.valueTwo" :precision="1" :min="0" :max="50" :controls="false"> </el-input-number>
                  <span class="append">℃</span>
                </el-form-item>
              </el-form-item>
              <el-form-item class="lineHeight_20">
                <span>在设定值外将产生机房温度报警</span>
              </el-form-item>
              <!-- 湿度  0-100 -->
              <el-form-item label="机房湿度:" :prop="'humidity.valueThree'" class="mb_8">
                <el-input-number class="w100 input_num" v-model="ruleForm.humidity.valueThree" :precision="1" :min="0" :max="100" :controls="false"> </el-input-number>
                <span class="append">%</span>
                <span style="padding: 0 10px">-</span>
                <el-form-item label="" :prop="'humidity.valueFour'" :rules="rules.humidity.valueFour" class="inline">
                  <el-input-number class="w100 input_num" v-model="ruleForm.humidity.valueFour" :precision="1" :min="0" :max="100" :controls="false"> </el-input-number>
                  <span class="append">%</span>
                </el-form-item>
              </el-form-item>
              <el-form-item class="lineHeight_20">
                <span>在设定值外将产生机房湿度报警</span>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="btnSizeStyle" :loading="humidity_disable" size="medium" @click="submitBtn('humidity', 3)" v-preventReClick>保存</el-button>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12" align="left">
            <div>
              <el-form-item label="水浸报警等级：" :prop="'humidity.alarmGrade'" class="mb_8">
                <el-select v-model="ruleForm.humidity.alarmGrade" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <!-- 占位 -->
              <el-form-item class="lineHeight_20">
                <span></span>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4" align="right"><div class="title">三相电报警设置</div></el-col>
          <el-col :span="8">
            <div>
              <!-- 相电压 0-380 -->
              <el-form-item label="相电压：" :prop="'threeePower.valueOne'" class="mb_8">
                <el-input-number class="w100 input_num" v-model="ruleForm.threeePower.valueOne" :precision="1" :min="0" :max="380" :controls="false"> </el-input-number>
                <span class="append">V</span>
                <span style="padding: 0 10px">-</span>
                <el-form-item label="" :prop="'threeePower.valueTwo'" :rules="rules.threeePower.valueTwo" class="inline">
                  <el-input-number class="w100 input_num" v-model="ruleForm.threeePower.valueTwo" :precision="1" :min="0" :max="380" :controls="false"> </el-input-number>
                  <span class="append">V</span>
                </el-form-item>
              </el-form-item>
              <el-form-item class="lineHeight_20">
                <span>在设定值外将产生机房相电压报警</span>
              </el-form-item>
              <!-- 线电压 0-480 -->
              <el-form-item label="线电压：" :prop="'threeePower.valueThree'" class="mb_8">
                <el-input-number class="w100 input_num" v-model="ruleForm.threeePower.valueThree" :precision="1" :min="0" :max="400" :controls="false"> </el-input-number>
                <span class="append">V</span>
                <span style="padding: 0 10px">-</span>
                <el-form-item label="" :prop="'threeePower.valueFour'" :rules="rules.line_max" class="inline">
                  <el-input-number class="w100 input_num" v-model="ruleForm.threeePower.valueFour" :precision="1" :min="0" :max="400" :controls="false"> </el-input-number>
                  <span class="append">V</span>
                </el-form-item>
              </el-form-item>
              <el-form-item class="lineHeight_20">
                <span>在设定值外将产生机房电压频率报警</span>
              </el-form-item>
              <!-- 保存按钮 -->
              <el-form-item>
                <el-button type="primary" class="btnSizeStyle" :loading="threeePower_disable" size="medium" @click="submitBtn('threeePower', 4)" v-preventReClick>保存</el-button>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12" align="left">
            <div>
              <el-form-item label="三相电报警等级：" :prop="'threeePower.alarmGrade'" class="mb_8">
                <el-select v-model="ruleForm.threeePower.alarmGrade" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <!-- 占位 -->
              <el-form-item class="lineHeight_20">
                <span></span>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog title="报警等级与消警一览表" :visible.sync="dialogVisible" width="882px" :before-close="handleClose">
      <div class="alarmTips">
        <h3>《报警等级与消警一览表》</h3>
        <div>备注：</div>
        <div>1、一级是最高报警等级，其他级别依次递减。</div>
        <div>2、一级报警不能消除。</div>
      </div>
      <el-table class="alarmTable" :data="tableData" border :header-cell-style="tableHeaderStyle" :cell-style="tableCellStyle">
        <el-table-column prop="level" align="center" label="报警等级" min-width="80"> </el-table-column>
        <el-table-column prop="equipment" align="center" label="报警设备" min-width="100"> </el-table-column>
        <el-table-column prop="lightColor" align="center" label="报警灯颜色" min-width="80"> </el-table-column>
        <el-table-column prop="lightTime" align="center" label="灯颜色交替时间(秒)" min-width="120"> </el-table-column>
        <el-table-column prop="buzzerDuration" align="center" label="蜂鸣器持续时间(秒)" min-width="120"> </el-table-column>
        <el-table-column prop="eliminateAlarm" align="center" label="是否可以人工消除报警" min-width="150"> </el-table-column>
        <el-table-column prop="eliminateAlarmTime" align="center" label="是否可以选择消除报警时间时长" min-width="150"> </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="btnSizeStyle" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { alarm } from '@/utils/allUrl.js'
import { timeLoad } from '@/assets/js/setTime'
export default {
  data() {
    return {
      loading: false,
      loadTime: null,
      // 1.水浸   2.ups   3.温湿度   4.三相电
      ruleFormSort: ['flooding', 'ups', 'humidity', 'threeePower'],
      // 水浸
      ruleForm: {
        flooding: {
          id: '',
          alarmType: '',
          valueOne: '', // 水浸报警 // 1-开启 2-关闭
          alarmGrade: '', // 水浸报警等级
        },
        ups: {
          id: '',
          alarmType: '',
          valueOne: '', // ups报警  // 1-开启 2-关闭
          alarmGrade: '', // ups报警等级
        },
        // 温湿度
        humidity: {
          id: '',
          alarmType: '',
          valueOne: '', // 温度最小值
          valueTwo: '', // 温度最大值
          valueThree: '', // 湿度最小值
          valueFour: '', // 湿度最大值
          alarmGrade: '', // 温湿度报警等级
        },
        // 三相电
        threeePower: {
          id: '',
          alarmType: '',
          valueOne: '', // 相电压最小值
          valueTwo: '', // 相电压最大值
          valueThree: '', // 线电压最小值
          valueFour: '', // 线电压最大值
          alarmGrade: 1, // 报警等级
        },
      },
      options: [
        { value: 1, label: '一级' },
        { value: 2, label: '二级' },
        { value: 3, label: '三级' },
        { value: 4, label: '四级' },
        { value: 5, label: '五级' },
        { value: 6, label: '六级' },
        { value: 7, label: '七级' },
        { value: 8, label: '八级' },
        { value: 9, label: '九级' },
      ],
      rules: {
        // 水浸
        flooding: {
          alarmGrade: [{ required: true, message: '请选择活报警等级', trigger: 'change' }],
        },
        // ups
        ups: {
          alarmGrade: [{ required: true, message: '请选择活报警等级', trigger: 'change' }],
        },
        // 温湿度
        humidity: {
          alarmGrade: [{ required: true, message: '请选择活报警等级', trigger: 'change' }],
          valueOne: [{ required: true, message: '此为必填项', trigger: 'blur' }],
          valueTwo: [{ required: true, message: '此为必填项', trigger: 'blur' }],
          valueThree: [{ required: true, message: '此为必填项', trigger: 'blur' }],
          valueFour: [{ required: true, message: '此为必填项', trigger: 'blur' }],
        },
        // 相电压
        threeePower: {
          alarmGrade: [{ required: true, message: '请选择活报警等级', trigger: 'change' }],
          valueOne: [{ required: true, message: '此为必填项', trigger: 'blur' }],
          valueTwo: [{ required: true, message: '此为必填项', trigger: 'blur' }],
          valueThree: [{ required: true, message: '此为必填项', trigger: 'blur' }],
          valueFour: [{ required: true, message: '此为必填项', trigger: 'blur' }],
        },
      },
      flooding_disable: false, // 水浸
      ups_disable: false, // ups
      humidity_disable: false, // 温湿度
      threeePower_disable: false, // 三相电
      flooding_timer: false, // 水浸
      ups_timer: false, // ups
      humidity_timer: false, // 温湿度
      threeePower_timer: false, // 三相电
      dialogVisible: false,
      tableData: [
        {
          level: '一级', // 报警等级
          equipment: '报警灯/蜂鸣器', // 报警设备
          lightColor: '红灯', // 报警灯颜色
          lightTime: '红灯常亮', // 灯颜色交替时间(秒)
          buzzerDuration: '一直响', // 蜂鸣器持续时间(秒)
          eliminateAlarm: '否', // 是否可以人工消除报警
          eliminateAlarmTime: '否', // 是否可以选择消除报警时间时长
        },
        {
          level: '二级', // 报警等级
          equipment: '报警灯/蜂鸣器', // 报警设备
          lightColor: '红灯', // 报警灯颜色
          lightTime: '红灯常亮', // 灯颜色交替时间(秒)
          buzzerDuration: '一直响', // 蜂鸣器持续时间(秒)
          eliminateAlarm: '是', // 是否可以人工消除报警
          eliminateAlarmTime: '是', // 是否可以选择消除报警时间时长
        },
        {
          level: '三级', // 报警等级
          equipment: '报警灯/蜂鸣器', // 报警设备
          lightColor: '黄灯', // 报警灯颜色
          lightTime: '黄灯常亮', // 灯颜色交替时间(秒)
          buzzerDuration: '一直响', // 蜂鸣器持续时间(秒)
          eliminateAlarm: '是', // 是否可以人工消除报警
          eliminateAlarmTime: '是', // 是否可以选择消除报警时间时长
        },
        {
          level: '四级', // 报警等级
          equipment: '报警灯/蜂鸣器', // 报警设备
          lightColor: '红暗交替', // 报警灯颜色
          lightTime: '1秒', // 灯颜色交替时间(秒)
          buzzerDuration: '1秒', // 蜂鸣器持续时间(秒)
          eliminateAlarm: '是', // 是否可以人工消除报警
          eliminateAlarmTime: '是', // 是否可以选择消除报警时间时长
        },
        {
          level: '五级', // 报警等级
          equipment: '报警灯/蜂鸣器', // 报警设备
          lightColor: '黄暗交替', // 报警灯颜色
          lightTime: '5秒', // 灯颜色交替时间(秒)
          buzzerDuration: '5秒', // 蜂鸣器持续时间(秒)
          eliminateAlarm: '是', // 是否可以人工消除报警
          eliminateAlarmTime: '是', // 是否可以选择消除报警时间时长
        },
        {
          level: '六级', // 报警等级
          equipment: '报警灯', // 报警设备
          lightColor: '红灯', // 报警灯颜色
          lightTime: '红灯常亮', // 灯颜色交替时间(秒)
          buzzerDuration: '/', // 蜂鸣器持续时间(秒)
          eliminateAlarm: '是', // 是否可以人工消除报警
          eliminateAlarmTime: '是', // 是否可以选择消除报警时间时长
        },
        {
          level: '七级', // 报警等级
          equipment: '报警灯', // 报警设备
          lightColor: '黄灯', // 报警灯颜色
          lightTime: '黄灯常亮', // 灯颜色交替时间(秒)
          buzzerDuration: '/', // 蜂鸣器持续时间(秒)
          eliminateAlarm: '是', // 是否可以人工消除报警
          eliminateAlarmTime: '是', // 是否可以选择消除报警时间时长
        },
        {
          level: '八级', // 报警等级
          equipment: '报警灯', // 报警设备
          lightColor: '红暗交替', // 报警灯颜色
          lightTime: '1秒', // 灯颜色交替时间(秒)
          buzzerDuration: '/', // 蜂鸣器持续时间(秒)
          eliminateAlarm: '是', // 是否可以人工消除报警
          eliminateAlarmTime: '是', // 是否可以选择消除报警时间时长
        },
        {
          level: '九级', // 报警等级
          equipment: '报警灯', // 报警设备
          lightColor: '黄暗交替', // 报警灯颜色
          lightTime: '5秒', // 灯颜色交替时间(秒)
          buzzerDuration: '/', // 蜂鸣器持续时间(秒)
          eliminateAlarm: '是', // 是否可以人工消除报警
          eliminateAlarmTime: '是', // 是否可以选择消除报警时间时长
        },
      ],
    }
  },
  watch: {
    loading(newVal, oldVal) {
      this.loadTime = setTimeout(() => {
        if (this.loading) {
          this.loading = false
        }
      }, timeLoad)
    },
    flooding_disable(newVal, oldVal) {
      this.flooding_timer = setTimeout(() => {
        if (this.flooding_disable) {
          this.flooding_disable = false
        }
      }, timeLoad)
    },
    ups_disable(newVal, oldVal) {
      this.ups_timer = setTimeout(() => {
        if (this.ups_disable) {
          this.ups_disable = false
        }
      }, timeLoad)
    },
    humidity_disable(newVal, oldVal) {
      this.humidity_timer = setTimeout(() => {
        if (this.humidity_disable) {
          this.humidity_disable = false
        }
      }, timeLoad)
    },
    threeePower_disable(newVal, oldVal) {
      this.threeePower_timer = setTimeout(() => {
        if (this.threeePower_disable) {
          this.threeePower_disable = false
        }
      }, timeLoad)
    },
  },
  created() {
    this.initList()
  },
  methods: {
    tableCellStyle() {
      return 'border-color: #000;'
    },
    tableHeaderStyle() {
      return { background: '#D9D9D9', color: '#000000', borderColor: '#000' }
    },
    handleClose() {
      this.dialogVisible = false
    },
    // 查询
    async initList() {
      clearTimeout(this.loadTime)
      this.loading = true
      const { data: res } = await this.$http.post(`${alarm}alarm/selectAlarmList`)
      this.loading = false
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item, index) => {
            if (item.alarmType < 3) {
              item.valueOne = Number(item.valueOne) // 水浸报警和ups报警
            }
            this.ruleForm[this.ruleFormSort[item.alarmType - 1]] = res.data.list[index]
            if (item.alarmType) {
            }
          })
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // 保存
    submitBtn(type, alarmType) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          return
        }
        console.log('alarmType---', alarmType)
        clearTimeout(this[`${type}_timer`])
        this[`${type}_disable`] = true
        const { id, alarmGrade, valueOne, valueTwo, valueThree, valueFour } = this.ruleForm[`${type}`]
        // 判断温湿度和三相电最大值和最小值
        // 1.水浸   2.ups   3.温湿度   4.三相电
        if (alarmType === 3 || alarmType === 4) {
          if (valueOne > valueTwo) {
            this.ruleForm[`${type}`].valueOne = valueTwo
            this.ruleForm[`${type}`].valueTwo = valueOne
          }
          if (valueThree > valueFour) {
            this.ruleForm[`${type}`].valueThree = valueFour
            this.ruleForm[`${type}`].valueFour = valueThree
          }
        }
        const params = new URLSearchParams()
        params.append('ID', id)
        params.append('alarmType', alarmType)
        params.append('alarmGrade', alarmGrade)
        if (valueOne !== 'null') {
          params.append('valueOne', valueOne)
        }
        if (valueTwo !== 'null') {
          params.append('valueTwo', valueTwo)
        }
        // console.log(valueThree, '-----', valueThree !== 'null')
        if (valueThree !== 'null') {
          params.append('valueThree', valueThree)
        }
        if (valueFour !== 'null') {
          params.append('valueFour', valueFour)
        }
        const { data: res } = await this.$http.post(`${alarm}alarm/insertOrUpdateAlarm`, params)
        this[`${type}_disable`] = false
        switch (res.code) {
          case '0000':
            this.$message.success(res.message)
            break
          default:
            this.$message.error(res.message)
            break
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.w100 {
  width: 100px;
}
.w150 {
  width: 150px;
}
.mb_8 {
  margin-bottom: 8px;
}
.mb_0 {
  margin-bottom: 0px;
}
.alarmGrade {
  color: #1989fa;
  padding-left: 15px;
  cursor: pointer;
}
// input 单位字段
.append {
  display: inline-block;
  background: #f7f7fa;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  height: 34px;
  padding: 0 15px;
  line-height: 34px;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: #333;
}
::v-deep .input_num {
  .el-input__inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.inline {
  display: inline-block;
}
.tips {
  position: relative;
  width: 100%;
  background-color: #f7f8fa;
  height: 40px;
  line-height: 40px;
  color: #323232;
  font-size: 14px;
  padding-left: 20px;
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 14px;
    background-color: #1989fa;
  }
}
::v-deep .lineHeight_20 {
  .el-form-item__content {
    line-height: 20px;
  }
  color: #909399;
  padding-top: 8px;
}
.title {
  height: 40px;
  line-height: 40px;
}
.el-row {
  padding-top: 15px;
  border-bottom: 1px solid #eeeeee;
  &:last-child {
    border: 0;
  }
  &:first-child {
    padding-top: 10px;
  }
}
.alarmTips {
  h3 {
    text-align: center;
    color: #000;
  }
  div {
    padding-left: 10px;
  }
  h3,
  div {
    height: 30px;
    line-height: 30px;
    border: 1px solid #000;
    border-bottom: 0;
  }
}
// 设置border的颜色
.alarmTable {
  border: 1px solid #000;
}
</style>
